<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据加密工具</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <style>
        /* 保留原有样式并优化 */
        .processing {
            display: none;
            text-align: center;
            margin: 20px 0;
            padding: 20px;
            background: rgba(0,0,0,0.05);
            border-radius: 8px;
        }
        .spinner {
            border: 4px solid rgba(0,0,0,0.1);
            border-top: 4px solid #3498db;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 0.8s linear infinite;
            margin: 0 auto 10px;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .result-visual {
            margin-top: 30px;
            padding: 20px;
            background-color: #f8f9fa;
            border-radius: 8px;
            border: 1px solid #eee;
        }
        .visual-bars {
            display: flex;
            height: 120px;
            align-items: flex-end;
            margin: 25px 0;
            gap: 3px;
        }
        .bar {
            flex: 1;
            background: linear-gradient(to top, #3498db, #2ecc71);
            min-width: 6px;
            transition: height 0.5s ease;
            border-radius: 3px 3px 0 0;
        }
        
        <style>
            /* 删除以下可视化相关样式 */
            /* .algorithm-visualization {...} */
            /* .visual-controls {...} */
            /* .grid-animation {...} */
            /* .byte-cell {...} */
        </style>
    </style>
</head>
<body>
    {% include '_header.html' %}
    
    <div class="container">
        <h1>数据加密</h1>
        <form id="encryptForm" method="POST" class="encrypt-form">
            <div class="form-group">
                <label for="plaintext">输入明文：</label>
                <textarea id="plaintext" name="plaintext" required rows="5"></textarea>
            </div>
            <div class="form-group">
                <label for="key">加密密钥：</label>
                <input type="text" id="key" name="key" required 
                       placeholder="AES: 16/24/32字符, DES: 8字符, 3DES: 16/24字符">
                <small class="hint">密钥长度提示将根据所选算法变化</small>
            </div>
            <script>
            document.getElementById('algorithm').addEventListener('change', function() {
                const hint = {
                    'aes': '请输入16、24或32个字符的密钥',
                    'des': '请输入8个字符的密钥',
                    '3des': '请输入16或24个字符的密钥',
                    'rc4': '密钥长度不限，建议至少8个字符',
                    'rabbit': '密钥长度不限，建议至少8个字符',
                    'md5': '不需要密钥',
                    'base64': '不需要密钥'
                };
                document.querySelector('.hint').textContent = hint[this.value];
            });
            </script>
            <div class="form-group">
                <label for="algorithm">加密算法：</label>
                <select id="algorithm" name="algorithm" required>
                    <option value="aes">AES加密</option>
                    <option value="des">DES加密</option>
                    <option value="3des">3DES加密</option>
                    <option value="rc4">RC4加密</option>
                    <option value="rabbit">Rabbit加密</option>
                    <option value="md5">MD5哈希</option>
                    <option value="base64">Base64编码</option>
                </select>
            </div>
            <button type="submit" class="submit-btn">开始加密</button>
        </form>



        {% if ciphertext %}
        <div class="result-visual">

            <div class="result-text">
                <h3>加密后的数据：</h3>
                <textarea readonly class="result-area">{{ ciphertext }}</textarea>
            </div>
        </div>
        {% endif %}
    </div>

    <script>
        document.getElementById('encryptForm').addEventListener('submit', function(e) {
            const plaintext = document.getElementById('plaintext').value;
            const key = document.getElementById('key').value;
            const algorithm = document.getElementById('algorithm').value;
            
            if(plaintext && key) {
                document.getElementById('processing').style.display = 'block';
                e.target.querySelector('button[type="submit"]').disabled = true;
                
                // 触发可视化
                const visualizer = new AlgorithmVisualizer();
                visualizer.processInput(plaintext, key, algorithm);
            }
        });
    </script>

    <!-- 在processing div之后添加 -->
    <!-- 删除从这里开始的整个algorithm-visualization div -->
    <!-- <div class="algorithm-visualization">
        <h2>算法原理可视化</h2>
        <div class="visual-controls">
            <button class="play-btn">播放动画</button>
            <button class="step-btn">单步执行</button>
            <span class="speed-control">
                速度: 
                <button class="speed-down">-</button>
                <span class="speed-value">1x</span>
                <button class="speed-up">+</button>
            </span>
        </div>
        
        <div class="visual-tabs">
            <button class="tab-btn active" data-algo="aes">AES</button>
            <button class="tab-btn" data-algo="des">DES</button>
            <button class="tab-btn" data-algo="rc4">RC4</button>
        </div>
        
        <div class="visual-content">
            <div id="aes-visual" class="algo-visual active">
                <!-- AES可视化内容 -->
            </div>
            <div id="des-visual" class="algo-visual">
                <!-- DES可视化内容 -->
            </div>
            <div id="rc4-visual" class="algo-visual">
                <!-- RC4可视化内容 -->
            </div>
        </div>
    </div> -->

    <script>
        // 添加相同的AlgorithmVisualizer类
        document.addEventListener('DOMContentLoaded', () => {
        // 绑定表单提交事件
        document.getElementById('encryptForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const plaintext = document.getElementById('plaintext').value;
            const key = document.getElementById('key').value;
            const algorithm = document.getElementById('algorithm').value;
            
            if(plaintext && key) {
                document.getElementById('processing').style.display = 'block';
                e.target.querySelector('button[type="submit"]').disabled = true;
                // 删除所有可视化相关代码
            };
        </script>
        
        <!-- 删除可视化相关的script标签 -->
        <!-- <script src="{{ url_for('static', filename='js/algorithm-visualizer.js') }}"></script> -->